<template>
  <view id="bind-tb-account">
    <view >
      <view class="input-box">
        <input class="input" v-model="tbAccount" :disabled="disabled" type="text" value="" placeholder="请输入要绑定的旺旺号" />
        <image
          v-show="!disabled"
          class="clear-btn"
          @click="tbAccount = ''"
          src="../../static/img/clear.png"
          mode=""
        ></image>
      </view>
      <view class="img-box">
        <image
          class="img-modal"
          src="../../static/img/tb_account.png"
          mode=""
        ></image>
      </view>
      <button
        class="btn-style submit-btn"
        @click="submitTbAccountCheck"
      >
        {{ btText }}
      </button>
    </view>
  </view>
</template>

<script>
import {
  apiAccountCreate
} from "../../../http/apis.js";
import uModal from "../../components/uni-modal/uni-modal.vue";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["token"]),
  },
  components: {
    uModal,
  },
  data() {
    return {
      authType: "init",
      btText: "提交",
      tbAccount: "",
      disabled: false,
      submitFlag: true
    };
  },
  onShow() {},
  onLoad(options) {
    this.authType = options.type ? options.type : "init";
    if (options.type == "again") {
      this.tbAccount = options.tbAccount;
      this.disabled = true;
      this.btText = "更新";
    }
  },
  methods: {
    submitTbAccountCheck() {
      if (!this.submitFlag) return;
      this.submitFlag = false;
      if (!this.tbAccount) {
        this.$msg.showToast("淘宝账号不能为空");
        return;
      }
      if (this.tbAccount.split("")[0] == " " || this.tbAccount.split("")[this.tbAccount.length-1] == " ") {
        this.$msg.showToast("请删除账号前后空格");
        return;
      }
      uni.showLoading({
        title: "绑定中",
        mask: true,
      });
      this.sendAjax();
    },
    sendAjax() {
      if (this.authType == "init") {
        // 绑定淘宝信息
        apiAccountCreate({
          token: uni.getStorageSync("token"),
          ww: this.tbAccount,
        }).then((res) => {
            uni.hideLoading();
            this.submitFlag = true;
            if (res.data.code == 1) {
              this.$msg.showToast(res.data.msg);
              setTimeout(() => {
                uni.switchTab({
                  url: "../home/home",
                });
              }, 500);
            } else {
              uni.showToast({
                title: res.data.msg ?? '信息获取失败，稍后重试',
                duration: 5000,
                icon: "none",
              });
            }
          })
          .catch((res) => {
            uni.hideLoading();
            this.$msg.showToast(res.data.msg);
          });
      }
      else if (this.authType == "again") {
        // 更新淘宝绑定信息
        apiAccountCreate({
          token: uni.getStorageSync("token"),
          ww: this.tbAccount,
        })
          .then((res) => {
            uni.hideLoading();
            if (res.data.code == 1) {
              this.$msg.showToast(res.data.msg);
              setTimeout(() => {
                uni.switchTab({
                  url: "../home/home",
                });
              }, 1000);
            } else {
              uni.showToast({
                title: res.data.msg ?? '更新失败',
                duration: 5000,
                icon: "none",
              });
            }
          })
          .catch((res) => {
            uni.hideLoading();
            this.$msg.showToast(res.data.msg);
          });
      }
      else{
        this.$msg.showToast('绑定通道有误');
      }
    },

  },
};
</script>

<style lang="scss">
page {
  background: #f5f5f5;
}
#bind-tb-account {
  .qrcode-box {
    position: relative;
    background: #ffffff;
    padding-bottom: 60upx;

    .image {
      width: 336upx;
      margin: 0 auto 20upx auto;
      padding-top: 48upx;
      .tips {
        text-align: center;
        font-size: 24upx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #999999;
        line-height: 34upx;
      }
    }

    .image image {
      display: block;
      width: 336upx;
      height: 336upx;
    }
    .refresh-btn {
      position: absolute;
      bottom: -32upx;
      left: 36%;
      width: 200upx;
      height: 64upx;
      background: linear-gradient(90deg, #ff8c00 0%, #ff5001 100%);
      border-radius: 10upx;
      font-size: 30upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 64upx;
    }
  }
  .bind-description {
    background: #ffffff;
    margin-top: 82upx;
    padding: 32upx;
    .content {
      font-size: 30upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 48upx;
    }
    .note {
      margin-top: 32upx;
      .note-icon {
        font-size: 32upx;
        color: $theme-color;
        display: inline-block;
        margin-right: 32upx;
      }
      .note-content {
        display: inline-block;
        font-size: 30upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff5001;
        line-height: 48upx;
      }
    }
  }
  .input-box {
    margin: 32upx 32upx 0 32upx;
    position: relative;
    .input {
      border: 1px solid #e9e9e9;
      background: #ffffff;
      height: 80upx;
      border-radius: 10upx;
      padding-left: 32upx;
      font-size: 28upx;
    }
    .clear-btn {
      width: 34upx;
      height: 34upx;
      position: absolute;
      right: 16upx;
      top: 14upx;
      padding: 10upx;
      background: #fff;
    }
  }
  .img-box {
    margin: 60upx;
    .img-modal {
      width: 100%;
      border: 2px solid #ffffff;
    }
  }
  .btn-style {
    margin: 32upx;
    height: 96upx;

    border-radius: 10upx;
    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 96upx;
    margin-top: 48upx;
  }
  .next-btn {
    background: $theme-background-color;
  }
  .on-btn {
    background: #ff8c00;
  }
  .submit-btn {
    background: $theme-color;
  }
  .modal-contet {
    text-align: center;
    .title {
      color: $theme-color;
    }
    .random-number {
      border: 1px dashed #e0e0e0;
      font-size: 80upx;
      display: inline-block;
      width: 240upx;
      height: 240upx;
      line-height: 240upx;
      border-radius: 100%;
      margin: 20upx 0;
      color: $theme-color;
    }
  }
}
</style>
